<!DOCTYPE html>
<html lang="zh-CN">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>发现 - VR-IoT</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                background-color: #f5f5f5;
                color: #333;
                transition: background-color 0.3s, color 0.3s;
                padding: 16px;
                min-height: 100vh;
            }
            
            body.dark-theme {
                background-color: #1e1e1e;
                color: #e0e0e0;
            }
            
            .container {
                max-width: 800px;
                margin: 0 auto;
            }
            
            h1 {
                margin-bottom: 24px;
                font-size: 24px;
            }
            
            .section {
                margin-bottom: 32px;
            }
            
            .section-title {
                font-size: 20px;
                font-weight: bold;
                margin-bottom: 16px;
                position: relative;
                padding-left: 12px;
            }
            
            .section-title::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 4px;
                height: 20px;
                background-color: #007bff;
                border-radius: 2px;
            }
            
            .featured-card {
                background-color: white;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                margin-bottom: 20px;
            }
            
            body.dark-theme .featured-card {
                background-color: #2d2d2d;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            }
            
            .featured-image {
                width: 100%;
                height: 180px;
                background: linear-gradient(135deg, #007bff, #00d4ff);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 48px;
            }
            
            .featured-content {
                padding: 16px;
            }
            
            .featured-title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 8px;
            }
            
            .featured-desc {
                font-size: 14px;
                color: #666;
                margin-bottom: 12px;
            }
            
            body.dark-theme .featured-desc {
                color: #aaa;
            }
            
            .featured-meta {
                font-size: 12px;
                color: #999;
            }
            
            body.dark-theme .featured-meta {
                color: #777;
            }
            
            .card-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 16px;
            }
            
            .discovery-card {
                background-color: white;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                transition: transform 0.3s, box-shadow 0.3s;
            }
            
            body.dark-theme .discovery-card {
                background-color: #2d2d2d;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            }
            
            .discovery-card:hover {
                transform: translateY(-4px);
                box-shadow: 0 4px 16px rgba(0,0,0,0.15);
            }
            
            body.dark-theme .discovery-card:hover {
                box-shadow: 0 4px 16px rgba(0,0,0,0.4);
            }
            
            .card-image {
                width: 100%;
                height: 140px;
                background: linear-gradient(135deg, #4caf50, #8bc34a);
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 36px;
            }
            
            .card-content {
                padding: 16px;
            }
            
            .card-title {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 8px;
            }
            
            .card-desc {
                font-size: 13px;
                color: #666;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }
            
            body.dark-theme .card-desc {
                color: #aaa;
            }
        </style>
        <!-- 国际化支持 -->
        <script src="/pwa-main/js/i18n.js"></script>
    </head>
<body data-auto-init-sdk="true">
        <div class="container">
            <h1 data-i18n="discovery.title">发现</h1>
        
        <div class="section">
            <h2 class="section-title">推荐内容</h2>
            <div class="featured-card" id="vr5gContentCard">
                <div class="featured-image">🚀</div>
                <div class="featured-content">
                    <div class="featured-title">5G+VR技术在智能家居中的应用</div>
                    <div class="featured-desc">探索5G网络如何提升VR体验，以及它们如何共同改变智能家居的交互方式和使用体验。</div>
                    <div class="featured-meta">2023-11-15 · 5分钟阅读</div>
                </div>
            </div>
        </div>
        
        <div class="section">
            <h2 class="section-title">最新发现</h2>
            <div class="card-grid">
                <div class="discovery-card">
                    <div class="card-image">💡</div>
                    <div class="card-content">
                        <div class="card-title">智能照明新趋势</div>
                        <div class="card-desc">了解最新的智能照明技术和设计趋势，为您的家居创造更舒适的光环境。</div>
                    </div>
                </div>
                <div class="discovery-card">
                    <div class="card-image">📱</div>
                    <div class="card-content">
                        <div class="card-title">物联网安全指南</div>
                        <div class="card-desc">保护您的智能家居设备免受网络攻击，学习基本的安全配置和最佳实践。</div>
                    </div>
                </div>
                <div class="discovery-card">
                    <div class="card-image">🏠</div>
                    <div class="card-content">
                        <div class="card-title">全屋智能方案</div>
                        <div class="card-desc">从零开始构建全屋智能系统，实现设备互联互通和自动化控制。</div>
                    </div>
                </div>
                <div class="discovery-card">
                    <div class="card-image">🔋</div>
                    <div class="card-content">
                        <div class="card-title">智能家居节能技巧</div>
                        <div class="card-desc">通过智能控制降低能源消耗，既环保又省钱的实用方法。</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="/pwa-main/js/frame-sdk.js"></script>
    <script>
            // 初始化变量
            let currentLang = 'zh-CN';
            let preloadSettings = null;
            
            // 立即监听预加载设置消息（不需要等待DOMContentLoaded）
            window.addEventListener('message', (event) => {
                if (event.data && event.data.type === 'PRELOAD_SETTINGS') {
                    console.log('接收到预加载设置:', event.data.settings);
                    preloadSettings = event.data.settings;
                    
                    // 如果i18n已经加载，立即应用预加载设置
                    if (window.i18n && preloadSettings.language) {
                        currentLang = preloadSettings.language;
                        window.i18n.setLanguage(preloadSettings.language);
                    }
                }
            }, { once: true });
            
            document.addEventListener('DOMContentLoaded', () => {
                // 更新页面标题的函数
                function updatePageTitle() {
                    if (window.i18n && window.frameSDK) {
                        const title = window.i18n.t('discovery.title');
                        window.frameSDK.updateTitle(title);
                        document.title = title + ' - VR-IoT';
                        console.log('discovery页面标题已更新:', title);
                    }
                }
                
                // 等待i18n模块加载完成
                if (window.i18n) {
                    // 如果有预加载设置，先应用语言设置
                    if (preloadSettings && preloadSettings.language) {
                        currentLang = preloadSettings.language;
                        window.i18n.setLanguage(preloadSettings.language);
                    } else {
                        currentLang = window.i18n.getLanguage();
                    }
                    
                    // 更新所有带i18n属性的元素
                    window.i18n.updateAllElements();
                }
            
                // 设置页面标题
                if (window.frameSDK && window.i18n) {
                    updatePageTitle();
                }
            
                // 监听语言变更事件，更新标题和UI元素
                window.addEventListener('languageChanged', () => {
                    console.log('discovery页面检测到语言变更事件');
                    if (window.i18n) {
                        updatePageTitle();
                        window.i18n.updateAllElements();
                    }
                });
            
                // 确保主框架语言变更时也能更新
                if (window.frameSDK) {
                    window.frameSDK.on('SETTINGS_UPDATE', (settings) => {
                        if (settings.language && window.i18n) {
                            console.log('discovery页面接收到SETTINGS_UPDATE消息，语言变更为:', settings.language);
                            // 当收到设置更新时，i18n.setLanguage已经被调用，languageChanged事件会被触发
                        }
                    });
                }
                
                // 监听页面切换时的标题刷新请求
                window.addEventListener('message', (event) => {
                    if (event.data && event.data.type === 'REFRESH_TITLE') {
                        console.log('接收到标题刷新请求');
                        updatePageTitle();
                    }
                });
                
                // 5G+VR内容卡片点击事件
                const vr5gCard = document.getElementById('vr5gContentCard');
                if (vr5gCard) {
                    console.log('发现VR内容卡片，设置点击事件');
                    // 添加触摸和鼠标事件以支持所有设备
                    vr5gCard.addEventListener('click', handleVRCardClick);
                    vr5gCard.addEventListener('touchstart', (e) => {
                        e.preventDefault(); // 防止触摸时的默认行为
                        handleVRCardClick();
                    });
                    
                    // 添加鼠标悬停效果提示
                    vr5gCard.style.cursor = 'pointer';
                    vr5gCard.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
                    vr5gCard.style.userSelect = 'none'; // 防止文本选择
                    
                    vr5gCard.addEventListener('mouseenter', () => {
                        vr5gCard.style.transform = 'scale(1.02)';
                        vr5gCard.style.boxShadow = '0 4px 16px rgba(0, 123, 255, 0.3)';
                    });
                    
                    vr5gCard.addEventListener('mouseleave', () => {
                        vr5gCard.style.transform = 'scale(1)';
                        vr5gCard.style.boxShadow = '';
                    });
                } else {
                    console.error('未找到VR内容卡片');
                }
                
                // VR卡片点击处理函数
                function handleVRCardClick() {
                    console.log('点击了5G+VR内容区，准备在当前页面加载VR全景');
                    // 在当前页面直接加载VR内容页面
                    window.location.href = '/plugin/discovery/vr-5g-content-panolens.html';
                }
            });
        </script>
</body>
</html>